<?php
session_start();

// 获取cites里的city 城市名称
$a = mysqli_connect("localhost", "root", "deng123", "housekeeping", "3306") or die("unable to connect");
@$query = "SELECT city FROM cities";
// 获取过来的city 插入到 select 标签里
$result = mysqli_query($a, $query);
$options = "<option value='' selected disabled>--选择城市--</option> <option value='其他'>其他</option>";

while ($row = mysqli_fetch_array($result)) {
    $options .= "<option value='" . $row['city'] . "'>" . $row['city'] . "</option>";
}


?>

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>好先生 | 家政服务</title>
    <link rel="shortcut icon" href="img/favicon.ico" />
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script>
        function myFunction() {
            var pass1 = document.getElementById("pass1").value;
            var pass2 = document.getElementById("pass2").value;
            var age = document.getElementById("age").value;
            if (age < 18) {
                alert("未满18岁不能注册");
                return false;
            }
            if (pass1 !== pass2) {
                alert("两次密码不一致");
                return false;
            }
            if (pass1.length < 6) {
                alert("密码长度不能小于6位");
                return false;
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            const selectElement = document.querySelector('select[name="city"]');
            const inputElement = document.querySelector('input[name="custom_city"]');
            selectElement.addEventListener('change', function() {
                if (this.value === '其他') {
                    selectElement.style.display = 'none';
                    inputElement.style.display = 'block';
                    inputElement.focus();
                }
            });
            inputElement.addEventListener('keydown', function(event) {
                if (event.key === 'Enter') {
                    selectElement.style.display = 'block';
                    inputElement.style.display = 'none';
                    // 创建一个新的 option 元素
                    let newOption = document.createElement('option');
                    newOption.value = this.value;
                    newOption.textContent = this.value;
                    // 将新创建的 option 元素添加到 select 元素中
                    selectElement.appendChild(newOption);
                }
            });
            inputElement.addEventListener('blur', function() {
                selectElement.style.display = 'block';
                inputElement.style.display = 'none';
                // 创建一个新的 option 元素
                let newOption = document.createElement('option');
                newOption.value = this.value;
                newOption.textContent = this.value;
                // 将新创建的 option 元素添加到 select 元素中
                selectElement.appendChild(newOption);
            });

        }, false);
    </script>
    <style>
        .showInput {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container-fluid register">
        <div class="row">
            <div class="col-md-3 register-left">
                <img src="img/logo.png" alt="" />
                <h2 style="font-family: Catamaran">欢迎!</h2>
                <br><br>
                <h2 style="font-family: Catamaran">工作年龄至少满18岁！</h2>
                <a href="workerlogin.html" style="text-decoration: none;"><input type="submit" name=""
                        value="登录" /></a><br><br>
            </div>
            <div class="col-md-9 register-right">
                <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link" href="index.php">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html">联系我们</a>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <br>
                        <h3 class="register-heading">好先生 会员--个人注册</h3>
                        <div class="register-form">
                            <form action="w_ind_reg_next.php" method="post" onsubmit="return myFunction()">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="text" name="name" class="form-control" placeholder="姓名 *"
                                                value="" required />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="email" name="email" class="form-control" placeholder="你的邮箱 *"
                                                value="" required />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="text" minlength="11" maxlength="11"
                                                name="phone" class="form-control" placeholder="你的手机号*" value=""
                                                required />
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="text" name="username" class="form-control" placeholder="用户名 *"
                                                value="" required />
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="password" name="password" id="pass1" class="form-control"
                                                placeholder="密码 *" value="" required />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="password" id="pass2" name="pass2" class="form-control"
                                                placeholder="确认密码*" value="" required />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <select name="question" required="required" class="form-control">
                                                <option value="" selected disabled>--选择安全问题--</option>
                                                <option value="奶奶名字">你奶奶叫什么名字？</option>
                                                <option value="旧手机号">你的旧电话号码是多少？</option>
                                                <option value="我的小名">你的小名叫什么?</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="text" name="answer" class="form-control" placeholder="输入你的答案 *"
                                                value="" required />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <select name="city" required="required" class="form-control">
                                                <?php
                                                echo $options;
                                                ?>
                                            </select>
                                            <input type="text" name="custom_city" class="form-control custom-input showInput">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <center>
                                                <div class="maxl">
                                                    <label class="radio inline">
                                                        <input type="radio" name="gender" value="male" required>
                                                        <span> 男 </span>
                                                    </label>
                                                    <label class="radio inline">
                                                        <input type="radio" name="gender" value="female" required>
                                                        <span>女 </span>
                                                    </label>
                                                    <label class="radio inline">
                                                        <input type="radio" name="gender" value="other" required>
                                                        <span>其他 </span>
                                                    </label>
                                                </div>
                                            </center>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="text" minlength="2" maxlength="2" id="age" name="age"
                                                class="form-control" placeholder="你的年龄*" value="" required />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <select name="category" required="required" class="form-control">
                                                <option value="" selected disabled>--选择工作类型--</option>
                                                <option value="保姆">保姆-- （保姆/园丁/厨师/深度清洁工）</option>
                                                <option value="修理">维修-- （水管工/电工/电气维修工）</option>
                                                <option value="装修">装修-- （建筑师/市内设计师/油漆工）</option>
                                                <option value="美容">美容-- （水疗/沙龙/按摩/造型/剪发）</option>
                                                <option value="家教">艺术-- （科目/艺术/舞蹈/唱歌）</option>
                                                <option value="打包 & 搬运">包装工和搬运工-- （家庭/办公室搬运）</option>
                                                <option value="摄影">摄影师-- （个人/商务/婚礼/节日）</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <select name="doc" required="required" class="form-control">
                                                <option value="" selected disabled>--选择证件--</option>
                                                <option value="军官证">军官证</option>
                                                <option value="身份证">身份证</option>
                                                <option value="香港台湾地区">香港台湾地区</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="text" name="doc_no" class="form-control" placeholder="证件号*"
                                                value="" required />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="number" name="experience" class="form-control"
                                                placeholder="工作经验*" value="" required />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="text" name="certified_level" class="form-control"
                                                placeholder="输入你的教育程度" value=""
                                                required />
                                        </div>
                                    </div>
                                    <input type="hidden" name="basis" value="Individual">
                                    <div class="col-md-6"></div>
                                    <div class="col-md-6">
                                        <input type="submit" class="btnRegister" value="提交" />
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="container">
            <p>&copy; 好先生 家政服务. 版权所有.</p>
            <ul class="list-inline">
                <li class="list-inline-item">
                    <a href="#">隐私</a>
                </li>
                <li class="list-inline-item">
                    <a href="#">条款</a>
                </li>
            </ul>
        </div>
    </footer>
</body>

</html>